<template>
    <div class="meetingAttendanceForm-template-Lu">
        <a-modal
            v-model:visible="visible"
            title="打印会议签到表"
            width="100%"
            wrapClassName="meetingAttendanceForm-modal-Lu">
            <div style="width: 794px;margin: 0 auto;">
                <div>
                    <a-button v-print="printObj" class="blue-btn">打印</a-button>
                </div>
                <!-- <div>
                    <a-button @click="generatePDF" class="blue-btn">生成会议签到表</a-button>
                </div> -->
                <div id="printTest">
                    <div style='font-family: "方正小标宋简体" !important;font-size: 28px;text-align: center;font-weight: 600;margin: 10px;'>
                        药品GMP审评会议签到表
                    </div>
                    <div>
                        <table border="1" borderColor="#000" cellspacing="0" style="width: 100%;font-family: 宋体 !important;" :key="tableKey">
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">
                                    企业名称
                                    <div>(地址)</div>
                                </th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    {{ sqsx.fqymc }}
                                    <div v-if="sqsx.fqyzszcdz">（{{ sqsx.fqyzszcdz }}）</div>
                                </td>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评范围</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    {{ sqsx.fcyjcfw }}
                                </td>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评类型</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    {{ sqsx.fjclx }}
                                </td>
                            </tr>
                            <tr>
                                <th rowspan="2" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">首次会议</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <span style="font-size: 18px;text-align: center;padding: 5px;font-family: 宋体 !important;font-weight: 600;color: #000;">会议时间：</span>
                                    {{ schy.hy.fhysj }}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <span style="font-size: 18px;text-align: center;padding: 5px;font-family: 宋体 !important;font-weight: 600;color: #000;">会议地点：</span>
                                    {{ schy.hy.fhydd }}
                                </td>
                            </tr>
                            <tr>
                                <th colspan="4" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评组参会人员签名</th>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评组</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <div style="display: flex;align-items: center;flex-wrap: wrap;">
                                        <div v-for="(item,index) in schy.jcyList" :key="index">
                                            <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                            <span v-else>{{ item.fxm }}</span>
                                            <span v-if="schy.jcyList.length !== index+1">、</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">观察员</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <div style="display: flex;align-items: center;flex-wrap: wrap;">
                                        <div v-for="(item,index) in schy.gcyList" :key="index">
                                            <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                            <span v-else>{{ item.fxm }}</span>
                                            <span v-if="schy.gcyList.length !== index+1">、</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th colspan="4" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">企业参会人员签名</th>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">部门/职务</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">签名</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">部门/职务</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">签名</th>
                            </tr>
                            <tr v-for="(item,index) in schyQyList" :key="index">
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">{{ item.fbm }}/{{ item.fzw }}</td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">
                                    <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                </td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">{{ item.nextItem.fbm }}
                                    <span v-if="item.nextItem.fbm && item.nextItem.fzw">/</span>
                                    {{ item.nextItem.fzw }}
                                </td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">
                                    <img v-if="item.nextItem.fqmfj" :src="item.nextItem.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                </td>
                            </tr>
                            <tr>
                                <th rowspan="2" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">末次会议</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <span style="font-size: 18px;text-align: center;padding: 5px;font-family: 宋体 !important;font-weight: 600;color: #000;">会议时间：</span>
                                    {{ mchy.hy.fhysj }}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <span style="font-size: 18px;text-align: center;padding: 5px;font-family: 宋体 !important;font-weight: 600;color: #000;">会议地点：</span>
                                    {{ mchy.hy.fhydd }}
                                </td>
                            </tr>
                            <tr>
                                <th colspan="4" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评组参会人员签名</th>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">审评组</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <div style="display: flex;align-items: center;flex-wrap: wrap;">
                                        <div v-for="(item,index) in schy.jcyList" :key="index">
                                            <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                            <span v-else>{{ item.fxm }}</span>
                                            <span v-if="schy.jcyList.length !== index+1">、</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;color: #000;">观察员</th>
                                <td colspan="3" style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;">
                                    <div style="display: flex;align-items: center;flex-wrap: wrap;">
                                        <div v-for="(item,index) in schy.gcyList" :key="index">
                                            <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                            <span v-else>{{ item.fxm }}</span>
                                            <span v-if="schy.gcyList.length !== index+1">、</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th colspan="4" style="font-size: 18px;text-align: center;padding: 5px;color: #000;">企业参会人员签名</th>
                            </tr>
                            <tr>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;font-weight: 600;">部门/职务</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">签名</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">部门/职务</th>
                                <th style="font-size: 18px;text-align: center;padding: 5px;width: 25%;color: #000;">签名</th>
                            </tr>
                            <tr v-for="(item,index) in mchyQyList" :key="index">
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">{{ item.fbm }}/{{ item.fzw }}</td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">
                                    <img v-if="item.fqmfj" :src="item.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                </td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">{{ item.nextItem.fbm }}
                                    <span v-if="item.nextItem.fbm && item.nextItem.fzw">/</span>
                                    {{ item.nextItem.fzw }}
                                </td>
                                <td style="font-size: 16px;padding: 5px;font-family: 仿宋_GB2312 !important;text-align: center;">
                                    <img v-if="item.nextItem.fqmfj" :src="item.nextItem.fqmfj" alt="" style="width: 86px;height: 40px;border: 1px solid #d9d9d9">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <template slot="footer">
                <a-button class="blue-btn" @click="visible = false">关闭</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {sqsxYwxxqueryHyqdPrintInfo,} from './service/index'
import moment from 'moment'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export default {
  data() {
    return {
      visible: false,
      tableKey: null,
      tableData: {},
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"会议签到表",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){
            // //console.log('打印回调',vue)
        },
        openCallback (vue) {//打开之前
            // //console.log('打开之前',vue)
        },
        closeCallback (vue) {//关闭了打印工具
            // //console.log('关闭了打印工具')
        },
      },
      moment,
      schy:{
        gcyList:[],
        hy:{},
        jcyList:[],
        qyList:[],
      },
      schyQyList:[],
      mchy:{
        gcyList:[],
        hy:{},
        jcyList:[],
        qyList:[],
      },
      mchyQyList:[],
      sqsx:{},
      currentData:{},
    }
  },
  methods:{
    getData(val){
        this.currentData = val
        this.tableKey = Date.now()
        sqsxYwxxqueryHyqdPrintInfo({sqsxid:val.sqsxid}).then(res => {
            //console.log('打印会议签到信息',res)
            if(res.code == 200){
                this.schy = res.result.schy
                this.schyQyList = []
                this.sqsx = res.result.sqsx
                if(res.result.schy && res.result.schy.qyList && res.result.schy.qyList.length){
                    let length = res.result.schy.qyList.length
                    res.result.schy.qyList.forEach((item,index) => {
                        if((index+1) % 2){
                            this.schyQyList.push({
                                ...item,
                                nextItem:length % 2 && length == index+1 ?{}:res.result.schy.qyList[index+1]

                            })
                        }
                    });
                }else{
                    this.schyQyList = [{
                        fbm:'',
                        fzw:'',
                        fqmfj:'',
                        nextItem:{
                            fbm:'',
                            fzw:'',
                            fqmfj:'',
                        }
                    }]
                }
                this.mchy = res.result.mchy
                this.mchyQyList = []
                if(res.result.mchy && res.result.mchy.qyList && res.result.mchy.qyList.length){
                    let length = res.result.mchy.qyList.length
                    res.result.mchy.qyList.forEach((item,index) => {
                        if((index+1) % 2){
                            this.mchyQyList.push({
                                ...item,
                                nextItem:length % 2 && length == index+1 ?{}:res.result.mchy.qyList[index+1]

                            })
                        }
                    });
                }else{
                    this.mchyQyList = [{
                        fbm:'',
                        fzw:'',
                        fqmfj:'',
                        nextItem:{
                            fbm:'',
                            fzw:'',
                            fqmfj:'',
                        }
                    }]
                }
            }else{
                this.sqsx = {}
                this.schy = {
                    gcyList:[],
                    hy:{},
                    jcyList:[],
                    qyList:[],
                }
                this.schyQyList = [{
                    fbm:'',
                    fzw:'',
                    fqmfj:'',
                    nextItem:{
                        fbm:'',
                        fzw:'',
                        fqmfj:'',
                    }
                }]
                this.mchy = {
                    gcyList:[],
                    hy:{},
                    jcyList:[],
                    qyList:[],
                }
                this.mchyQyList = [{
                    fbm:'',
                    fzw:'',
                    fqmfj:'',
                    nextItem:{
                        fbm:'',
                        fzw:'',
                        fqmfj:'',
                    }
                }]
            }
            this.visible = true
        })
    },
    async generatePDF() {
    const element = document.getElementById('printTest'); // 获取你想要转换为PDF的DOM元素
    if (element) {
      try {
        // 使用html2canvas将DOM元素转换为canvas
        const canvas = await html2canvas(element);
        const imgData = canvas.toDataURL('image/png');
        
        // 创建一个新的PDF文档
        const pdf = new jsPDF();
        
        // 将图片添加到PDF文档中
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        
        // 添加一页到PDF，并考虑图片的大小
        if (pdfHeight > pdf.internal.pageSize.getHeight()) {
          pdf.addPage(); // 如果图片高度超过一页，则添加新页
        }
        
        pdf.addImage(imgData, 'PNG', 0, 0, imgProps.width / 2, imgProps.height / 2); // 将图片添加到PDF中，并调整大小以适应页面
        
        // 你可以继续添加更多内容到PDF
        
        // 触发下载
        pdf.save('output.pdf');
      } catch (error) {
        console.error('Error generating PDF:', error);
      }
    } else {
      console.error('Element not found');
    }
  },
    generateCheckInForm(){
        
        var element = '<div id="printTest">'+
                    '<div style="font-family: 方正小标宋简体 !important;font-size: 28px;text-align: center;font-weight: 600;margin: 10px;">'+
                        '药品GMP审评会议签到表'+
                    '</div>'
                    sqsxYwxxHtmlToFileByXcjchy({sqsxid:this.currentData.sqsxid,html:element}).then(res=>{
                        if(res.code == 200){

                        }else{

                        }
                    })
                    return false
                    
        var textContentAsString = element.innerText || element.textContent;
        //console.log(textContentAsString)
        //console.log('"'+document.getElementById('printTest')+'"')
        return false
        sqsxYwxxHtmlToFileByXcjchy().then(res=>{
            if(res.code == 200){

            }else{

            }
        })
    }
  }
}
</script>
<style lang="less">
.meetingAttendanceForm-print-box {
    text-align: center;
    .meetingAttendanceForm-table {
        width: 100% !important;
        text-align: center;
        table-layout: fixed;
        font-family:宋体 !important;
        th {
            font-size: 18px;
            padding: 10px 0px;
        }
        td {
            font-size: 16px;
            padding: 5px;
            min-height: 40px !important;
        }
        img {
            width: 100px;
            height: 30px;
        }
    }
}
.meetingAttendanceForm-modal-Lu {
  .ant-modal {
    background-color: #5ca3e5;
    position: static;
    width: 100%;
    height: 100%;
    top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-body {
    padding: 15px !important;
    background-color: white;
    overflow-y: scroll;
    height: calc(100vh - 108px) !important;
  }
  .ant-modal-wrap {
    background-color: white;
  }
}
</style>
